<template>
  <transition enter-active-class="animated slideInUp" leave-active-class="animated slideOutRight">
  <div class="page-rent">
    <cont-header head-title="我的合同" goBack="true" :addUrl="addUrl" :addUrlParam="addUrlParam"></cont-header>
    <section class="profile-1reTe">
<!--       <router-link :to="{path: '/rent/newcontract', query:{userId: userId}}" class="myrent">
        <aside>
          <svg fill="#4aa5f0">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#order"></use>
          </svg>
        </aside>
        <div class="myrent-div">
          <span>新增合同</span>
          <span class="myrent-divsvg">
            <svg fill="#bbb">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
            </svg>
          </span>
        </div>
      </router-link> -->
      <cont-list :userId="userId" v-if="userId"></cont-list>
    </section>
    <alert-tip v-if="showAlert" @closeTip="closeTip" :alertText="alertText"></alert-tip>
    <!-- <transition name="router-slid" mode="out-in"> -->
      <router-view></router-view>
    <!-- </transition> -->
  </div>
  </transition>
</template>
  
<script>
  import {mapGetters} from 'vuex'
  import contHeader from '@/components/common/header/header4add'
  import contList from '@/components/common/list/contlist'
  import alertTip from '@/components/common/alertTip'
  import 'animate.css/animate.css'
  export default {
    data(){
      return {
        addUrl: null,
        addUrlParam: null, 
        showAlert: false,      //显示提示组件
        alertText: null,       //提示的内容
        goBack: false
      }
    },
    components: {
      contHeader,
      contList,
      alertTip
    },
    computed: {
      ...mapGetters([
        'storeAuthInf',
        'rentUser'
      ]),
      userId: function() {
        return this.$route.query.userId;
      }
    },
    beforeMount() {
      this.addUrl =  "/rent/contract/newcontract",
      this.addUrlParam = {"userId": this.userId}, 
      console.log("beforeMount addUrl:", this.addUrl);
      console.log("beforeMount addUrlParam:", this.addUrlParam);
    },
    mounted() {
      if (this.userId === null) {
        this.showAlert = true;
        this.alertText = "用户ID为空";
        this.goBack = true;
        return;
      }
      if (!this.storeAuthInf.authCode) {
        console.log("authCode is null: getAuthCode");
        this.$store.dispatch('getAuthCode');
      }
      if (this.storeAuthInf.authCode && !this.storeAuthInf.authToken) {
        console.log("authToken is null: getAuthToken");
        this.$store.dispatch('getAuthToken', this.storeAuthInf.authCode);
      }
    },
    methods: {
      closeTip() {
        console.log("this.goBack:", this.goBack);
        this.showAlert = false;
        if (this.goBack) {
          this.$router.go(-1);
        }
      }
    },
    watch: {
      'storeAuthInf.authCode': function(val, oldVal) {
        // 重新获取code后需要再次获取token
        console.log("watch:authCode:", oldVal, val);
        this.$store.dispatch('getAuthToken', this.storeAuthInf.authCode);
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import 'src/style/mixin';

  .page-rent{
    // position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f2f2f2;
    z-index: 202;
    padding-top: 1.95rem;
    p, span {
      font-family: Helvetica Neue,Tahoma,Arial;
    }
  }
  .profile-1reTe{
    margin-top:.4rem;
    background:$fc;
    .myrent{
        padding-left:1.6rem;
        display:flex;
        align-items: center;
        aside{
            @include wh(.7rem,.7rem);
            margin-left:-.866667rem;
            margin-right:.266667rem;
            display:flex;
            align-items: center;
            svg{
                @include wh(100%,100%);
            }
        }
        .myrent-div{
            width:100%;
            border-bottom:1px solid #f1f1f1;
            padding:.433333rem .266667rem .433333rem 0;
            @include sc(.7rem,#333);
            display:flex;
            justify-content:space-between;
            span{
                display:block;
            }
            .myrent-divsvg{
                @include wh(.46667rem,.466667rem);
                svg{
                    @include wh(100%,100%);
                }
            }
        }
    }
    .myrent:nth-of-type(3) .myrent-div{
        border:0;
    }
  }
</style>
